<template>
    <!--@scroll='reqMoreCom'-->
    <div class='root' >
        <div class='pingjia-header'>
            <section class='header-left'>
                <strong>{{allScore.overall_score|scoreFormat}}</strong>
                <p>综合评价</p>
                <span>高于周边商家{{allScore.compare_rating|compareFormat}}</span>
            </section>
            <section class='header-right'>
                <div>
                    <span>
                        服务态度
                        <Rater class='right-side'
                            disabled
                            active-color='#ffaa0c'
                            :font-size = 15
                            v-model="allScore.service_score" 
                            slot="value">
                        </Rater>
                        {{allScore.service_score|scoreFormat}}
                    </span>
                </div>
                <div class='food-score'>
                    <span>
                        菜品评价
                        <Rater class='right-side'
                            disabled
                            active-color='#ffaa0c'
                            :font-size = 15
                            v-model='allScore.food_score'
                            slot="value">
                        </Rater>
                        {{allScore.food_score|scoreFormat}}
                    </span>
                </div>
                <div>
                    <span>
                        送达时间
                        <span class='right-side'>{{allScore.deliver_time}}分钟</span>
                    </span>
                </div>
            </section>
        </div>

        <div class='pingjia-total'>
            <ul class='total'>
                <li 
                v-for='(item,i) in totalCom' 
                class='per'
                @click='selCate(item,i)'
                @mouseout='unSelCate(item)'
                :class='{"unactive-unsatisfied":item.unsatisfied,"unactive-satisfied":!item.unsatisfied}'
                >
                    <span :ref='"i"'>{{item.name}}</span>
                    <span>({{item.count}})</span>
                </li>
            </ul>
        </div>
        
        <div class='pingjia-list'>
            <ul>
                <li class='list-content' v-for='item in allCommondList'>
                    <div class='head-pic'>
                        <span class='fa fa-user-circle-o'></span>
                    </div>
                    <div class='right-content'>
                        <div class='right-top'>
                            <span>{{item.username}}</span>
                            <span>{{item.rated_at}}</span>
                        </div>
                        <div>
                            <Rater 
                                disabled
                                active-color='#ffaa0c'
                                :font-size = 10
                                v-model="item.rating_star" 
                                slot="value">
                            </Rater>
                            <span>{{item.time_spent_desc}}</span>
                        </div>
                        <div>
                            <span style='color:#000;'>{{item.rating_text}}</span>
                            <div v-show='item.reply_text' class='reply-text'>
                               <span> 商家回复：{{item.reply_text}}</span>
                            </div>    
                        </div>
                        <div>
                            <div v-for='i in item.item_ratings' class='map-depot'>
                                <img 
                                v-show='i.image_hash' 
                                :src="i.image_hash|imgFormat" 
                                @click='showFullPic(i.image_hash)'
                                >
                                <div class='full-pic'v-show='isShowFull' @click='isShowFull=false' >
                                    <img :src="imgIndex|imgFormat">
                                    <p>{{i.food_name}}</p>
                                </div>
                            </div>
                        </div>
                        <div class='rating-text'>
                            <div v-for='i in item.item_ratings'>
                                <span>{{i.food_name}}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

        </div>

        <!--<load-more tip="正在加载"></load-more>-->
    </div>
</template>
<script>
    import { Rater,LoadMore } from 'vux'
    export default{
        props:['allScore','totalCom','allCommondList'],
        data:function(){
            return {
                isActived:false,
                isShowFull:false,
                imgIndex:"",
                cateIndex:"",
            }
        },
        components:{
            Rater,
            LoadMore,
        },
        mounted:function(){
            this.$emit('getComList',"全部")
        },
        methods:{
            selCate:function(item,index){
                if(!item.unsatisfied){
                    this.$refs.i[index].parentNode.classList.add('active-satisfied')
                }
                else{
                    this.$refs.i[index].parentNode.classList.add('active-unsatisfied')
                }
                this.$emit('getComList',this.$refs.i[index].innerText)
                this.cateIndex = index
            },
            unSelCate:function(item){
                if(!item.unsatisfied){
                    event.currentTarget.classList.remove('active-satisfied')
                    event.currentTarget.classList.add('unactive-satisfied')
                }
                else{
                    event.currentTarget.classList.remove('active-unsatisfied')
                    event.currentTarget.classList.add('unactive-unsatisfied')
                }
            },
            showFullPic:function(i){
                this.imgIndex = i
                this.isShowFull=true
            },
            reqMoreCom:function(){
                var cH = event.target.clientHeight
                var sH = event.target.scrollHeight
                var sT = event.target.scrollTop
                if(sT >= sH - cH -100){
                    this.$emit('getComList',this.cateIndex)
                }
            }
        }
    }
</script>
<style scoped>
    .pingjia-header{
        width: 100%;
        display: flex;
        justify-content: space-around;
        border-bottom: 10px solid #eee;
    }
    .pingjia-header section{
        margin: 20px 10px;
    }
    .header-left{
        width:40%;
        text-align: center;
        border-right: 1px solid #999;
    }
    .header-left strong{
        font-size: 2.4rem;
        color:rgb(255, 102, 0);
    }
    .header-left p{
        font-size: 1.4rem;
        color: #333;
        padding: 5px 0;
    }
    .header-left span{
        font-size: 1.2rem;
        color: #999;
    }
    .header-right{
        width: 60%;
        font-size: 1.4rem;
        color: #333;
    }
    .food-score{
        padding: 5px 0;
    }
    .right-side{
        padding-left: 10px;
    }
    /*总评 */
    .pingjia-total{
        width: 100%;
    }
    .total{
        overflow: hidden;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    .per{
        padding: 7px;
        margin: 2px 4px ;
        float: left;
        border-radius: 5px;
    }
    /*评论列表*/
    .list-content{
        display: flex;
        justify-content: space-between;
        padding: 14px;
        font-size: 14px;
        color:#666;
        border-bottom: 1px solid rgb(221, 221, 221);
    }
    .list-content .head-pic span{
        color:#DEDEDE;
        font-size: 30px;
    }
    .right-content{
        width: 86%;
    }
    .right-content .right-top{
        display: flex;
        justify-content: space-between;
    }
    .map-depot{
        display: inline-block;
    }
    .map-depot img{
        width: 68px;
        height: 68px;
        padding:5px 5px 5px 0;
    }
    .rating-text{
        width: 100%;
        text-align: center;
        line-height: 22px;
        font-size: 6px;
    }
    .rating-text div{
        width: 50px;
        height: 22px;
        padding: 0 5px;
        float: left;
        overflow: hidden;
        margin-right: 5px;
        border: 1px solid rgb(221, 221, 221);
        border-radius: 2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        
    }
    .reply-text::before{
        content:"";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        margin-top: -15px;
        background-color: rgb(243, 243, 243);
        transform:rotate(45deg)
    }
    .reply-text{
        margin-top: 10px;
        background-color: rgb(243, 243, 243);
        padding: 10px;
        border-radius: 5px;
    }
    /*完整图片*/
    .full-pic{
        height:100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: rgb(51, 51, 51);
    }
    .full-pic img{
        width: 100%;
        height: auto;
        margin-top:25%;
        padding: 0;
    }
    .full-pic p{
        position: fixed;
        bottom: 10px;
        left: 10px;
        color:#fff;
    }
    .unactive-satisfied{
        background-color:rgb(235, 245, 255);
        color:rgb(109, 120, 133);
    }
    .active-satisfied{
        background-color:rgb(49, 144, 232);
        color: #fff;
    }
    .unactive-unsatisfied{
        background-color:rgb(245, 245, 245);
        color:rgb(170, 170, 170);
    }
    .active-unsatisfied{
        background-color:rgb(204, 204, 204);
        color: rgb(255, 255, 255);
    }
</style>